﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JS拖动后放开的事件感应.aspx.cs" Inherits="js组件_js拖拽_JS拖动后放开的事件感应" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:31px;
	top:21px;
	width:220px;
	height:58px;
	z-index:5;
	background-color: #FFFFD7;
	border: 1px dashed #000000;
}
#apDiv2 {
	position:relative;
	left:523px;
	top:126px;
	width:246px;
	height:144px;
	background-color: #FFFFff;
	border: 1px dashed #000000;
}
-->
</style>
<script language="javascript"  type="text/javascript">
//<![CDATA[ 
//通用 移动 Div 类
//请保留一下我的信息,谢谢
//Edit By Skybot
//QQ:35287352
function Tong_MoveDiv()
{	//参数说明
	// id 要移动的层ID 
	// Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event;
	// T 为 int 有数字是拖动 没有是变大小
	// Panel 为可选的函数 拖动后目标的容器 id
	// fun为处理的方法
	this.Move=function(Id,Evt,T,Panel,fun)
	{
		if(Id=="") return;
		var o = document.getElementById(Id);
		if(!o) return;//如果这个东东不在
		evt = Evt ? Evt : window.event;
		o.style.position = "absolute";//设定他的样式为绝对定位
		o.style.zIndex = 200;//这里显示上下的
		var obj = evt.srcElement ? evt.srcElement : evt.target; //得到个原素  使它在FF中也可以用
		//得到当前对要移动对象的 坐标
		var w = o.offsetWidth;
	    var h = o.offsetHeight;
	    var l = o.offsetLeft;
	    var t = o.offsetTop;
	    var div = document.createElement("DIV");//新原素DIV
		document.body.appendChild(div);
	    div.style.cssText = "filter:alpha(Opacity=10,style=0);opacity:0.2;width:"+w+"px;height:"+h+"px;top:"+t+"px;left:"+l+"px;position:absolute;background:#000";//设定 filter； 注意opacity 是FF中的 Opacity
	    div.setAttribute("id", Id +"temp");
		
		if(T)//看看是拖动还是 变大小
		{
		    //看看是不是有拖动的后感应区事件
		    if(Panel==undefined)
		    {
			    this.Move_OnlyMove(Id,evt);
		    }
		    else//有感应区
		    {
		        if(fun==undefined)
		        {
		            this.Move_OnlyMove(Id,evt,Panel);
		        }
		        else
		        {
		            this.Move_OnlyMove(Id,evt,Panel,fun);
		        }
		    }
		}
		else
		{
			
		}
	}
	
	//移动函数
	//参数 Id  要移动的层ID 
	//Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event;
	this.Move_OnlyMove = function(Id,Evt,Panel,fun)
	{
		var o = document.getElementById(Id+"temp");
		if(!o) return;
		evt = Evt?Evt:window.event;//都是FF 才要这么写的
		var relLeft = evt.clientX - o.offsetLeft;//得到左边的 宽度
	    var relTop = evt.clientY - o.offsetTop;//得到上边的 宽度
		//抓取 事件
		if (!window.captureEvents)
		{
	    	o.setCapture(); //指定  抓取 事件
		}
		else
		{
			window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
	    }
		
		//文档的 onmousemove 事件
		document.onmousemove = function(e)
		{
			if (!o) return;
		    e = e ? e : window.event;
		    if (e.clientX - relLeft <= 0)
			    o.style.left = 0 +"px";
		    else if (e.clientX - relLeft >= document.documentElement.clientWidth - o.offsetWidth - 2)
			    o.style.left = (document.documentElement.clientWidth - o.offsetWidth - 2) +"px";
		    else
			    o.style.left = e.clientX - relLeft +"px";
		    if (e.clientY - relTop <= 1)
			    o.style.top = 1 +"px";
		    else if (e.clientY - relTop >= document.documentElement.clientHeight - o.offsetHeight - 30)
			    o.style.top = (document.documentElement.clientHeight - o.offsetHeight - 30) +"px";
		    else
			    o.style.top = e.clientY - relTop +"px";
            
            //加入拖动所感应区
            if(Panel!=undefined)
            {
                try
                {
		            MyMove.Move_evt(Panel,e);
                }
                catch(e)
                {
                    
                }
            }
		}
		
		//文档的 onmouseup 事件
		document.onmouseup = function(e)//eFF里的事件
	    {
		    if (!o) return;
		    if (!window.captureEvents)
		    	o.releaseCapture();
		    else
		    	window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
		    var o1 = document.getElementById(Id);
		    if (!o1) return;
		    var l0 = o.offsetLeft;
		    var t0 = o.offsetTop;
		    var l = o1.offsetLeft;
		    var t = o1.offsetTop;			   
		    MyMove.Move_e(Id, l0 , t0, l, t);
		    document.body.removeChild(o);
		    o = null;
		    
            var  e = e ? e : window.event;//得到当前的事件
            //加入拖动所感应区
            if(Panel!=undefined)
            {
                try
                {
                    if(fun==undefined)
		            {
		                MyMove.Move_evt(Panel,e);
		            }
		            else
		            {
		                MyMove.Move_evt(Panel,e,fun);
		            }
                }
                catch(e)
                {
                    
                }
            }
            
	    }	
	}
	
	this.Move_e = function(Id, l0 , t0, l, t)
    {
	    if (typeof(window["ct"+ Id]) != "undefined") clearTimeout(window["ct"+ Id]);
	    var o = document.getElementById(Id);
	    if (!o) return;
	    var sl = st = 8;
	    var s_l = Math.abs(l0 - l);
	    var s_t = Math.abs(t0 - t);
	    if (s_l - s_t > 0)
		    if (s_t)
			    sl = Math.round(s_l / s_t) > 8 ? 8 : Math.round(s_l / s_t) * 6;
		    else
			    sl = 0;
	    else
		    if (s_l)
		    	st = Math.round(s_t / s_l) > 8 ? 8 : Math.round(s_t / s_l) * 6;
		    else
			    st = 0;
	    if (l0 - l < 0) sl *= -1;
	    if (t0 - t < 0) st *= -1;
	    if (Math.abs(l + sl - l0) < 52 && sl) sl = sl > 0 ? 2 : -2;
	    if (Math.abs(t + st - t0) < 52 && st) st = st > 0 ? 2 : -2;
	    if (Math.abs(l + sl - l0) < 16 && sl) sl = sl > 0 ? 1 : -1;
	    if (Math.abs(t + st - t0) < 16 && st) st = st > 0 ? 1 : -1;
	    if (s_l == 0 && s_t == 0) return;
	    if (Math.abs(l + sl - l0) < 2)
		    o.style.left = l0 +"px";
	    else
		    o.style.left = l + sl +"px";
	    if (Math.abs(t + st - t0) < 2) 
		    o.style.top = t0 +"px";
	    else
		    o.style.top = t + st +"px";
	    window["ct"+ Id] = window.setTimeout("MyMove.Move_e('"+ Id +"', "+ l0 +" , "+ t0 +", "+ (l + sl) +", "+ (t + st) +")", 1);
    }
}


//对它拖动类进行封装
Tong_MoveDiv.prototype={
    Move_evt
    :function(ssid,Evt,fun)
    {/// <summary>
     /// 传入范围的 容器ID 
     /// 返回鼠标当前的位置是不是在
     /// 传入的范围内
     //  当鼠标松开时如果也在 范围内则执行 传入的方法 fun
     /// </summary>
     ///<param name="ssid">容器ID</param>
         var obj  = document.getElementById(ssid);//将传入ID转成对象
         var t = obj.offsetHeight;//相对高度  : obj.offsetWidth//当前对象的宽度
         var l =+obj.offsetWidth;//相对的左边 : obj.offsetHeight//当前对象的高度
         var e =  Evt ? Evt : window.event;//得到当前鼠标或事件的位置 这里是鼠标
         var evt = e ? e : window.event;
         //得到当前的鼠标的位置
         var m_l = evt.clientX-obj.offsetLeft;
         var m_t= evt.clientY-obj.offsetTop;
         try
         {
                //在容器里
                if(m_l<=l&&m_t<=t&&m_l>0&&m_t>0)
                {
                    obj.style.backgroundColor="#FFFFD7";
                    if(fun!=undefined)
                    {
                        eval(fun);//执行传入函数
                    }
                }
                else
                {
                     obj.style.backgroundColor="#ffffff";
                }
         }
         catch(e)
         {
            alert(e);
         }
    }
    
}
var MyMove = new  Tong_MoveDiv();
//----------------------------------

function cu(objid)
{
    alert('ddd');
    alert(document.getElementById(objid).innerHTML);
}
//  ]]> 
</script>

</head>

<body>
    <form id="form1" runat="server">
    
    <div>
    
        <div id="apDiv1" onmousedown="MyMove.Move('apDiv1',event,1,'apDiv2','cu(\'pp\')');" style="cursor:move;">
            拖动</div>
            
            
           <div id="Div3" onmousedown="MyMove.Move('Div3',event,1);" style="cursor:move;">
            拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动
            </div>
        <div id="apDiv2">
        我是 感应区
        拖动我会有事件哦
        </div>
    </div>
    <div id="pp">dfsfds<br/></div>
    </form>
</body>
</html>
